<template>
	<view>
		<uni-nav-bar @clickLeft="toBack" color="#555" leftIcon="arrowleft" title="设置" :fixed="true" :status-bar="true"></uni-nav-bar>
		<view class="body" :style="{ height: height + 'px' }">
			<view class="split">
				<view class="set-item line" @tap="userTreaty">
					<view class="title">用户使用协议</view>
					<view class="icon iconfont icon-youjiantou"></view>
				</view>

				<view class="set-item" @tap="privateTreaty">
					<view class="title">用户隐私协议</view>
					<view class="icon iconfont icon-youjiantou"></view>
				</view>
			</view>

			<view class="split">
				<view class="set-item line" @tap="feedback">
					<view class="title">用户反馈</view>
					<view class="icon iconfont icon-youjiantou"></view>
				</view>

				<view class="set-item" @tap="updatePhone">
					<view class="title">修改手机号</view>
					<view class="icon iconfont icon-youjiantou"></view>
				</view>
			</view>

			<view class="split">
				<view class="set-item line" @tap="checkVersion">
					<view class="title">当前版本</view>
					<view class="info">{{versionCode}}</view>
				</view>

				<view class="set-item" @tap="clearCache">
					<view class="title">清除缓存</view>
					<view class="info">{{size}}M</view>
				</view>
			</view>
			<view class="logout"><view class="logout-button" @tap="logout">退出登录</view></view>


			<uni-popup ref="popupCache" type="dialog">
				<uni-popup-dialog
					type="success"
					title="清除缓存"
					content="清除缓存后,聊天记录将会被清除,你确定清楚吗"
					:before-close="true"
					@confirm="confirmCleanCache"
					@close="closeCache"
				></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
import constant from '../../utils/Constant.js';
import showToast from '../../utils/ToastUtils.js';
export default {
	components: {
		uniPopup,
		uniPopupDialog
	},
	data() {
		return {
			height: 0,
			size:0,
			versionCode:''
		};
	},
	methods: {
		logout(){
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.logOut,
				header: constant.authHead(),
				method: 'POST',
				success: res => {
					if (res.data.code === constant.dataCode.OK) {
						uni.removeStorage({
							key:constant.user,
							success() {
								uni.navigateTo({
									url:'../login/login'
								});
							}
						});
					} else {
						showToast(res.data.msg);
					}
				},
				fail: r => {
					console.log(r);
				}
			});
		},
		toBack(){
			uni.navigateBack({
				delta:1
			});
		},
		userTreaty() {
			uni.navigateTo({
				url: '../xwebview/xwebview?url=https://www.huazhu91.com/userProtocol.html'
			});
		},
		privateTreaty() {
			uni.navigateTo({
				url: '../xwebview/xwebview?url=https://www.huazhu91.com/privacyProtocol.html'
			});
		},
		feedback() {
			uni.navigateTo({
				url: '../feedback/feedback'
			});
		},
		updatePhone() {
			uni.navigateTo({
				url: '../update-phone/update-phone'
			});
		},
		checkVersion() {
			constant.versionCheck(true);
		},
		clearCache() {
			this.$refs.popupCache.open();
		},
		closeCache() {
			this.$refs.popupCache.close();
		},
		confirmCleanCache() {
			this.$refs.popupCache.close();
			uni.clearStorage();
			uni.showToast({
				title: '清除成功',
				icon: 'none',
				success() {
					uni.navigateTo({
						url:'../login/login'
					})
				}
			});
		}
	},
	onShow() {
		plus.runtime.getProperty(plus.runtime.appid,widgetInfo => {
			this.versionCode = widgetInfo.version;
		});
	},
	onLoad() {
		uni.getSystemInfo({
			success: res => {
				this.height = res.windowHeight-90;
			}
		});
		uni.getStorageInfo({
			success:res=>{
				this.size=res.currentSize/1024<1?1:res.currentSize/1024;
				this.size=this.size.toFixed(2);
			}
		});
	}
};
</script>

<style lang="less" scoped>
.body {
	background: #f5f7fa;
}
.split {
	padding-top: 10rpx;
}
.line {
	border-bottom: 2rpx solid #eeeeee;
}
.set-item {
	padding: 20rpx 40rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background-color: #ffffff;
	.title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.icon-youjiantou::before {
		font-weight: 500;
		color: #999999;
	}
	.info {
		font-size: 28rpx;
		color: #999999;
	}
}

.logout {
	margin-top: 60rpx;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	.logout-button {
		text-align: center;
		background-color: #ffffff;
		width: 75%;
		height: 90rpx;
		border-radius: 30rpx;
		color: #f86090;
		font-weight: 500;
		font-size: 34rpx;
		line-height: 90rpx;
	}
}
</style>
